<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="person">
            <div class="avatar">
                <div><img :src="imgDataUrl" class="my_img"></div>
                <el-button type="primary" @click="toggleShow" class="upload_btn">
                    设置头像<i class="el-icon-upload el-icon--right"></i>
                </el-button>
                <my-upload field="img"
                           @crop-success="cropSuccess"
                           @crop-upload-success="cropUploadSuccess"
                           @crop-upload-fail="cropUploadFail"
                           v-model="show"
                           method="POST"
                           :width="300"
                           :height="300"
                           :url="axios.defaults.baseURL + '/users/uploadAvatarImg'"
                           :params="params"
                           :headers="headers"
                ></my-upload>
            </div>
            <div class="info">
                <h1>欢迎 {{$store.getters.nickname}} </h1>
                <p><span>角色：</span> {{$store.getters.role.role_name}}</p>
                <p><span>角色描述：</span> {{$store.getters.role.role_desc}}</p>
                <div v-if="$store.getters.role.role_id !== 1">
                <p><span>专业：</span> {{$store.getters.major.name}}</p>
                <p><span>年级：</span>
                    <el-button plain v-for="item in string_split($store.getters.grades.split(','))" :key="item">
                        {{ item }}
                    </el-button>
                </p>
                <p><span>班级：</span>
                    <el-button plain v-for="item in $store.getters.class_list" :key="item.id">
                        {{ item.name }}
                    </el-button>
                </p>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import myUpload from 'vue-image-crop-upload';
    import 'babel-polyfill'

    export default {
        data() {
            return {
                show: false,
                params: {
                    name: 'avatar',
                    user_id: this.$store.getters.user_id
                },
                headers: {'Authorization': window.sessionStorage.getItem("token")},
                imgDataUrl: '',
            }
        },
        components: {
            'my-upload': myUpload
        },
        created() {
            this.imgDataUrl = this.$store.getters.avatar_url;
        },
        methods: {
            string_split(string){
                if (string.constructor === Array) return string;
                return string.split(',')
            },
            toggleShow() {
                this.show = !this.show;
            },
            cropSuccess(imgDataUrl, field) {
                this.imgDataUrl = imgDataUrl
            },
            cropUploadSuccess(data, field) {
                var img_url = this.domain + data.img_path;
                this.$message.success("上传成功");
                this.$store.commit('handleAvatar', img_url);
                this.show = false
            },
            cropUploadFail(status, field) {
                console.log('-------- upload fail --------');
                console.log(status);
                this.$message.error("上传失败");
            }
        }
    }
</script>

<style lang="less" scoped>
    .person {
        width: 100%;
        min-height: 400px;
        margin-top: 5%;
    }

    .avatar {
        float: left;
        width: 40%;
        height: 100%;
    }

    .my_img {
        width: 300px;
        height: 300px;
        margin-left: 57px;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    .upload_btn {
        margin-top: 10px;
        margin-left: 158px;
    }

    .info {
        width: 500px;
        height: 300px;
        border: 1px solid #fff;
        font-size: 18px;
        margin-top: -20px;
        float: right;
        h1{
          font-size: 36px;
        };
        span{
            font-weight: bolder;
            font-size: 20px;
            color: dodgerblue;
        }
    }
</style>
